@include b(carousel) {
  position: relative;
  overflow: hidden;

  @include e(item) {
    display: inline-block;
    width: 100%;
    height: 100%;
  }

  @include e(pagination) {
    position: absolute;
  }

  @include e(pagination__item) {
    background: var(--carousel-pagination-rect-color);
    cursor: pointer;
    border-radius: var(--carousel-pagination-rect-border-radius);

    @include m(active) {
      background: var(--carousel-pagination-rect-color-active);
    }
  }

  @include m(horizontal) {
    @include e(items) {
      will-change: transform;
      white-space: nowrap;
    }

    @include e(pagination) {
      left: 50%;
      bottom: var(--carousel-pagination-distance);
      transform: translate3d(-50%, 0, 0);
    }

    @include e(pagination__item) {
      display: inline-block;
      width: var(--carousel-pagination-rect-width);
      height: var(--carousel-pagination-rect-height);

      &:not(:last-child) {
        margin-right: var(--carousel-pagination-rect-step);
      }
    }
  }

  @include m(vertical) {
    @include e(pagination) {
      top: 50%;
      right: var(--carousel-pagination-distance);
      transform: translate3d(0, -50%, 0);
    }

    @include e(pagination__item) {
      width: var(--carousel-pagination-rect-height);
      height: var(--carousel-pagination-rect-width);

      &:not(:last-child) {
        margin-bottom: var(--carousel-pagination-rect-step);
      }
    }
  }
}
